<template>
  <div>
    <div class="table-data" v-show="tabShow">
      <div class="search-box">
        <div class="search-box">
        <el-input size="small" v-model="searchMap.title" placeholder="商品名称"></el-input>
        <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
        
      </div>
        
      </div>
      <p class="special-num">目前共<span style="color:red">{{tableData.length}}</span>件特殊商品</p>
      <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData" :header-cell-style="headClass" style="width:100%" :height="tHeight" class="table-box">
        <el-table-column label="id" width="60" prop="id"></el-table-column>
        <el-table-column label="商品信息" width="180">
          <template slot-scope="scope"> 
            <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.cover"></el-image>
            <span>{{scope.row.title}}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品类型" prop="type_txt" width="60"></el-table-column>
        <el-table-column label="供应商" prop="vendor_name" width="80"></el-table-column>
        <el-table-column label="商家" prop="shop_name"></el-table-column>
        <el-table-column label="原价">
          <template slot-scope="scope">
            <div v-if="scope.row.spec_list.length>0">
              <p v-for="item in scope.row.spec_list" :key="item.id">{{item.key_name}}/{{item.original_price}}</p>
            </div>
            <p v-else>{{scope.row.original_price}}</p>
          </template>
        </el-table-column>
        <el-table-column label="供应商/商家结算价">
          <template slot-scope="scope">
            <div v-if="scope.row.spec_list.length>0">
              <p v-for="item in scope.row.spec_list" :key="item.id">{{item.key_name}}/{{item.vendor_price}}/{{item.sell_price}}</p>
            </div>
            <p v-else>{{scope.row.vendor_price}}/{{scope.row.sell_price}}</p>
          </template>
        </el-table-column>
        <el-table-column label="渠道结算价">
          <template slot-scope="scope">
            <div v-if="scope.row.spec_list.length>0">
              <p v-for="item in scope.row.spec_list" :key="item.id">{{item.key_name}}/{{item.platform_price}}</p>
            </div>
            <p v-else>{{scope.row.platform_price}}</p>
          </template>
        </el-table-column>
        <el-table-column label="建议售价">
          <template slot-scope="scope">
            <div v-if="scope.row.spec_list.length>0">
              <p v-for="item in scope.row.spec_list" :key="item.id">{{item.key_name}}/{{item.price}}</p>
            </div>
            <p v-else>{{scope.row.price}}</p>
          </template>
        </el-table-column>
        <el-table-column label="已售">
          <template slot-scope="scope">
            <div v-if="scope.row.spec_list.length>0">
              <p v-for="item in scope.row.spec_list" :key="item.id">{{item.key_name}}/{{item.sale_stock}}</p>
            </div>
            <p v-else>{{scope.row.sale_stock}}</p>
          </template>
        </el-table-column>
        <el-table-column label="可售库存">
          <template slot-scope="scope">
            <div v-if="scope.row.spec_list.length>0">
              <p v-for="item in scope.row.spec_list" :key="item.id">{{item.key_name}}/{{item.reset_stock}}</p>
            </div>
            <p v-else>{{scope.row.reset_stock}}</p>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status_txt" width="70"></el-table-column>
        <el-table-column label="所属分类" prop="category_txt" width="80"></el-table-column>
        <el-table-column label="售卖时间">
          <template slot-scope="scope">
            <p>{{scope.row.verify_start_time}} 到 {{scope.row.verify_end_time}}</p>
          </template>
        </el-table-column>
        <el-table-column label="修改后渠道结算价">
          <template slot-scope="scope">
            <div v-if="scope.row.spec_list.length>0">
              <p v-for="item in scope.row.spec_list" :key="item.id">{{item.key_name}}/{{item.reset_platform_price}}</p>
            </div>
            <p v-else>{{scope.row.reset_platform_price}}</p>
          </template>
        </el-table-column>
        <el-table-column label="库存">
          <template slot-scope="scope">
            <div v-if="scope.row.spec_list.length>0">
              <p v-for="item in scope.row.spec_list" :key="item.id">{{item.key_name}}/{{item.stock}}</p>
            </div>
            <p v-else>{{scope.row.stock}}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.$index,scope.row)" size="mini" type="primary">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages" ref="page-box">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
      </div>
    </div>
    <router-view @loadData="loadData" :tabShow="tabShow"></router-view>
    <EditDialog :isEdit="isEdit" :key="timer" :form="formData" :mch_id="mch_id" @closeDialog="closeDialog" @loadData="loadData"></EditDialog>
    <AddDialog :isAdd="isAdd" :addTableData="addTableData" :mch_id="mch_id" @closeDialog="closeDialog" @loadDatas="loadData"></AddDialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";
import EditDialog from "./EditDialog.vue";
import AddDialog from "./AddDialog.vue";
import channelApi from "@/api/channel";
import commonApi from "@/api/common";
@Component({
  components: {AddDialog, EditDialog }
})
export default class specialSet extends Vue {
  // @Getter("user") getUser: any;
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() addTableData: any = []; // 添加特殊商品弹窗表格数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
  @Provide() isEdit: Boolean = false; // 是否展示编辑弹窗
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() timer: any = ''; 
  @Provide() mch_id:any=''
  @Provide() formData: any = {
    mch_id:"",
    goods_id:"",
    sku_id:"",
    stock: "",
    platform_price:0,
  };
  @Provide() searchMap:{
    title: any
  }={
    title:""
  }
  headClass() {
    return "text-align: center;background:#eef1f6;";
  }
 // 新增
  handleAdd(){
    this.isAdd=true;
  }
  // 编辑
  handleEdit(index: number, row: any){
    this.isEdit=true;
    this.timer=new Date().getTime()
    this.formData=row
    console.log(this.formData)
    // if(this.tableData[index].spec_list.length>0){
    //   this.formData=this.tableData.spec_list
    // }
  }
  // 关闭弹窗
  closeDialog() {
    this.isAdd = false;
    this.isEdit = false;
    this.loadData();
  }
  handleSearch(){
    this.page = 1;
    this.size = 10;
    this.loadData()
  }
  created() {
    this.loadData();
  }

  loadData() {
    this.mch_id=this.$route.query.id
    channelApi.specialSet(this.page,this.size,this.$route.query.id,this.searchMap.title)
      .then((res: any) => {
        this.tableData =  res.data.data.goods_lists ? res.data.data.goods_lists.data : [];
        this.total  =  res.data.data.goods_lists ? res.data.data.goods_lists.total : 0
        this.loading=false
      });
      // commonApi.alertGoodsList(this.searchMap)
      // .then((res: any) => {
      //   this.addTableData = res.data.data.goods_lists.data;
      //   console.log(res.data)
      // });
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }
  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }
}
</script>

<style lang="scss" scoped>
.el-range-editor.el-input__inner{
  margin-right: 10px
}
.special-txt{
  margin-left: 20px;
  font-size: 12px;
}
.special-num{
  background: #fff;
  padding: 15px 10px;
}
</style>
